<template>
  <div class="messagebox">
    <p class="notice-title">{{ obj.title }}</p>
    <p class="people"><span>发起单位:</span>{{ obj.depName }}</p>
    <p class="people date"><span>发起时间:</span>{{ obj.createTime }}</p>
    <div class="content">{{ obj.message }}</div>
    <!-- <pdf ref="pdf" :src="files"> </pdf> -->
    <pdf ref="pdf" v-for="i in numPages" :key="i" :src="files" :page="i" class="contentpdf"></pdf>
  </div>
</template>
<script>
  import pdf from "vue-pdf"; //todo 注释回来
  import { picHost } from "@/settings.js";
  export default {
    data() {
      return {
        obj: this.$route.query,
        files: "",
        numPages: null, // pdf 总页数
      };
    },
    components: {
      pdf,
    },
    mounted() {

      this.files = picHost + this.obj.files;
      this.getNumPages()
    },
    methods: {
      getNumPages() {
        let loadingTask = pdf.createLoadingTask(this.files)
        loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages
        }).catch(err => {
          console.error('pdf 加载失败', err);
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .messagebox {
    margin: 5px;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
  }

  .notice-title {
    text-align: center;
    font-size: 40px;
    border-bottom: 2px dashed #ccc;
    padding-bottom: 10px;
    margin-bottom: 35px;
    background-color: #fff;

  }

  .people {
    font-size: 15px;
    line-height: 25px;
    margin: 0;
    font-weight: 600;
    text-align: left;
    margin-left: 10px;
  }

  .content {
    text-align: justify;
    text-indent: 25px;
    font-size: 20px;

  }
</style>